<template>
  <el-dialog :title="title" :visible.sync="visible" v-dialog-drag width="400px" append-to-body>
    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :disabled="loading" :headers="headers" :auto-upload="false"
               :action="baseApi + baseUrl + 'import?' + params" :on-progress="handleProgress"
               :on-success="handleSuccess" drag>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip text-center" slot="tip">
        <span>仅允许导入xls、xlsx格式文件。</span>
        <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                 @click="downloadTemplte">下载模板
        </el-link>
      </div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {getToken} from "@/utils/auth";
import moment from "moment";

export default {
  name: "ImportCard",
  props: {
    params: String,
    baseUrl: String,
    busName: {type: String, default: "业务数据"},
  },
  data() {
    return {
      title: '',
      visible: false,
      loading: false,
      baseApi: process.env.VUE_APP_BASE_API,
      headers: {Authorization: "Bearer " + getToken()},
    }
  },
  methods: {
    /** 下载模板操作 */
    downloadTemplte() {
      this.download(`${this.baseUrl}template`, {}, `${this.busName}导入模板_${moment().format('YYYYMMDD-HHmmss')}.xlsx`)
    },
    // 文件上传中处理
    handleProgress(event, file, fileList) {
      this.loading = true;
    },
    // 文件上传成功处理
    handleSuccess(response, file, fileList) {
      this.visible = false;
      this.loading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
      this.$emit('ok');
    },
    // 提交上传文件
    handleSubmit() {
      this.$refs.upload.submit();
    },
    handleCancel() {
      this.visible = false;
      this.$emit('close');
    }
  }
}
</script>
<style scoped lang="scss">

</style>
